<template>  
    <div class="relative w-full h-full">
        <PageHeader title="退款售后订单管理" />
        <SearchCom :searchList="searchConfig" @search="handleSearch" @reset="handleReset" />
        
        <el-table
            :data="tableData"
            style="width: 100%"
            class="cover-table mt12"
            height="calc(100% - 150px)"
            border
        >
            <el-table-column prop="shopId" label="商家ID" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="shopName" label="名称" />
            <el-table-column prop="contactPerson" label="联系人" />
            <el-table-column prop="contactPhone" label="联系电话" />
            <el-table-column prop="status" label="订单状态">
                <template #default="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单编号" />
            <el-table-column prop="userName" label="用户姓名" />
            <el-table-column prop="userPhone" label="用户号码" />
            <el-table-column prop="userEmail" label="邮件地址" />
            <el-table-column prop="orderTime" label="订单时间" />
            <el-table-column prop="refundAmount" label="退款金额">
                <template #default="scope">
                    {{ scope.row.refundAmount }} 元
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template #default="scope">
                    <div class="flex_aic_jcc" v-if="scope.row.status === 1">
                        <el-button type="success" size="small" @click="openRefundDialog(scope.row)">
                            同意退款
                        </el-button>
                        <el-button type="danger" size="small" @click="handleRejectRefund(scope.row)">
                            取消退款
                        </el-button>
                    </div>
                    <div v-else>
                        <el-tag type="info">已处理</el-tag>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex justify-end mt24 absolute bottom-0 right-0">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <!-- 退款弹窗 -->
        <el-dialog
            v-model="refundDialogVisible"
            title="退款确认"
            width="30%"
            :close-on-click-modal="false"
        >
            <div class="refund-dialog-content">
                <el-form :model="refundForm" label-width="100px">
                    <el-form-item label="订单号">
                        <span>{{ currentOrder.orderNumber }}</span>
                    </el-form-item>
                    <el-form-item label="用户">
                        <span>{{ currentOrder.userName }}</span>
                    </el-form-item>
                    <el-form-item label="原始金额">
                        <span>{{ currentOrder.refundAmount }} 元</span>
                    </el-form-item>
                    <el-form-item label="退款金额">
                        <el-input 
                            v-model="refundForm.amount" 
                            placeholder="请输入退款金额"
                            type="number"
                        >
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="退款说明">
                        <el-input 
                            v-model="refundForm.remark" 
                            type="textarea" 
                            placeholder="请输入退款说明"
                            :rows="3"
                        />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="refundDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmRefund">确认退款</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import SearchCom from "@/components/searchCom.vue";
import PageHeader from "@/components/PageHeader.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const searchConfig = ref([
    {
        label: "商家ID",
        key: "shopId",
        type: "input",
    },
    {
        label: "地址",
        key: "address",
        type: "input",
    },
    {
        label: "名称",
        key: "shopName",
        type: "input",
    },
    {
        label: "联系人",
        key: "contactPerson",
        type: "input",
    },
    {
        label: "联系电话",
        key: "contactPhone",
        type: "input",
    },
    {
        label: "订单状态",
        key: "status",
        type: "select",
        options: [
            { label: "待处理", value: 1 },
            { label: "已处理", value: 2 },
        ],
    },
    {
        label: "订单编号",
        key: "orderNumber",
        type: "input",
    },
    {
        label: "用户姓名",
        key: "userName",
        type: "input",
    },
    {
        label: "用户号码",
        key: "userPhone",
        type: "input",
    },
    {
        label: "邮件地址",
        key: "userEmail",
        type: "input",
    },
    {
        label: "订单时间",
        key: "timeRange",
        type: "daterange",
    }
]);

const searchForm = ref({
    shopId: "",
    address: "",
    shopName: "",
    contactPerson: "",
    contactPhone: "",
    status: "",
    orderNumber: "",
    userName: "",
    userPhone: "",
    userEmail: "",
    timeRange: [],
});

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 模拟数据
const tableData = ref([
    {
        id: 1,
        shopId: "SH001",
        address: "北京市朝阳区XX街道",
        shopName: "示例商家1",
        contactPerson: "张三",
        contactPhone: "13800138001",
        status: 1, // 1: 待处理, 2: 已处理
        orderNumber: "ORD2024050001",
        userName: "李四",
        userPhone: "13900139001",
        userEmail: "lisi@example.com",
        orderTime: "2024-05-01 10:30:00",
        refundAmount: 299.00
    },
    {
        id: 2,
        shopId: "SH002",
        address: "上海市浦东新区XX街道",
        shopName: "示例商家2",
        contactPerson: "王五",
        contactPhone: "13800138002",
        status: 2,
        orderNumber: "ORD2024050002",
        userName: "赵六",
        userPhone: "13900139002",
        userEmail: "zhaoliu@example.com",
        orderTime: "2024-05-02 14:20:00",
        refundAmount: 199.50
    }
]);

// 退款弹窗相关
const refundDialogVisible = ref(false);
const currentOrder = ref({});
const refundForm = reactive({
    amount: "",
    remark: ""
});

const getStatusType = (status) => {
    const map = {
        1: "warning",
        2: "success"
    };
    return map[status];
};

const getStatusText = (status) => {
    const map = {
        1: "待处理",
        2: "已处理"
    };
    return map[status];
};

const handleSearch = () => {
    // 实现查询逻辑
    console.log("搜索条件:", searchForm.value);
    // 这里应该调用API获取数据
};

const handleReset = () => {
    searchForm.value = {
        shopId: "",
        address: "",
        shopName: "",
        contactPerson: "",
        contactPhone: "",
        status: "",
        orderNumber: "",
        userName: "",
        userPhone: "",
        userEmail: "",
        timeRange: [],
    };
    handleSearch();
};

const openRefundDialog = (row) => {
    currentOrder.value = row;
    refundForm.amount = row.refundAmount;
    refundForm.remark = "";
    refundDialogVisible.value = true;
};

const confirmRefund = () => {
    if (!refundForm.amount) {
        ElMessage.warning("请输入退款金额");
        return;
    }
    
    // 这里应该调用API处理退款
    currentOrder.value.refundAmount = refundForm.amount;
    currentOrder.value.status = 2;
    ElMessage.success("退款成功");
    refundDialogVisible.value = false;
};

const handleRejectRefund = (row) => {
    ElMessageBox.confirm(
        "确定要取消此退款申请吗？",
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            // 这里应该调用API处理取消退款
            row.status = 2;
            ElMessage.success("已取消退款申请");
        })
        .catch(() => {
            // 取消操作
        });
};

const handleSizeChange = (size) => {
    pageSize.value = size;
    handleSearch();
};

const handleCurrentChange = (page) => {
    currentPage.value = page;
    handleSearch();
};
</script>

<style lang="scss" scoped>
.cover-table {
    margin-top: 20px;
}

.refund-dialog-content {
    padding: 0 20px;
}
</style>